<template>
	<div id="app">

		<el-row :gutter="20">
			<el-col :span="5">
				<div class="grid-content bg-purple">
					<el-tree :data="data" :props="defaultProps" node-key="id" :default-expand-all="false"
						:default-checked-keys="defKeys" ref="treeRef" @node-click="nodeClick">
					</el-tree>
				</div>
			</el-col>

			<el-col :span="8" :offset="2">
				<div class="grid-content bg-purple">
					<el-button type="primary" @click="addNodeClick">添加子节点</el-button>
					<el-button @click="SetFatherNodeClick">设置父节点</el-button>
					<p><span>{{msg}}</span></p>
					<el-form ref="form" :model="form" label-width="80px">
						<el-form-item disabled label="父节点编号">
							<el-input :disabled="FatherNodeIdState" v-model="form.parentId"></el-input>
						</el-form-item>
						<el-form-item label="节点编号">
							<el-input :disabled="NodeIdState" v-model="form.id"></el-input>
						</el-form-item>
						<el-form-item label="节点名称">
							<el-input v-model="form.name"></el-input>
						</el-form-item>
						<el-form-item label="路径">
							<el-input v-model="form.url"></el-input>
						</el-form-item>
						<el-form-item label="权重">
							<el-input v-model="form.weight"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">保存</el-button>
							<el-button @click="resetClick">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-col>
		</el-row>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				defaultProps: {
					children: 'children',
					label: 'title'
					// ModuleId:"id",
					// checked:"checked",
					// href:"href"

				},
				defKeys: [],
				form: {},
				FatherNodeIdState: true,
				NodeIdState: true,
				msg: "功能模块信息维护",
				nodeName: "",
				nodeId:"",



			}
		},
		created() {
			this.GetAllModule();
		},
		methods: {
			async GetAllModule() {
				const res = await this.$http.post(
					"/api/api/GetAllModuleLayUI?token=283e105a-79a3-4130-99f7-ffd3e9d4078d");
				
				this.data = res.data;
			},
			handleNodeClick(e) {
				console.log(e);
			},
			//编辑  模块信息
			async onSubmit() {
				if(this.form.id==0){
					const res2 = await this.$http.post(
						"/api/api/CreateModule?token=283e105a-79a3-4130-99f7-ffd3e9d4078d", {
							
							name: this.form.name,
							parentId: this.form.parentId,
							path: this.form.url,
							weight: this.form.weight
							
						});
						
						if (!res2.data.success) {
							this.$message.error("添加子节点失败！");
						}
						this.$message.success("添加子节点成功！");
				}
				
				const res = await this.$http.post("/api/api/UpdateModule?token=283e105a-79a3-4130-99f7-ffd3e9d4078d", {
					mId: this.form.id,
					name: this.form.name,
					parentId: this.form.parentId,
					path: this.form.url,
					weight: this.form.weight

				});
				if (!res.data.success) {
					this.$message.error("更新模块失败！");
				}
				this.$message.success("更新模块成功！");
				this.FatherNodeIdState=true;
				this.GetAllModule();
				

			},
			async nodeClick(e1) {
				this.nodeName = e1.title;
				this.nodeId=e1.id;
				console.log(e1);

				const res = await this.$http.post(
					"/api/api/GetModuleById?token=283e105a-79a3-4130-99f7-ffd3e9d4078d", {
						id: e1.id
					});
				var res2 = JSON.parse(res.data.message);
				console.log(res2);
				this.form = res2;

			},
			//重置表单
			resetClick() {
				this.form = {};

			},
			//添加子节点
			 addNodeClick() {
				this.msg = `为【 ${this.nodeName} 】添加子节点`;
				this.form={
					parentId:this.nodeId,
					id:0
				};	
			},
			//设置父节点
			 SetFatherNodeClick() {
				
				this.msg = `为【 ${this.nodeName} 】调整父编号`;
				this.FatherNodeIdState=false;
			}

		}

	}
</script>

<style lang="less" scoped="scoped">
	#app {
		background-color: #eaedf1;
	}

	.tree-div {
		width: 20%;
		background-color: #eaedf1;
	}

	.p-span {
		font-size: 30px;
	}
</style>
